/* eslint-disable import/no-dynamic-require */
import createComponent from 'cxs-components';

export default createComponent('div')(({ drawType, insideStyle, selectType }) => {
  const { analyButColor, analyButActiveColor, butSize } = insideStyle;
  return {
    width: `${butSize}px`,
    height: `${butSize}px`,
    backgroundColor: selectType === drawType ? analyButActiveColor : analyButColor,
    WebkitMask: `url(${require(`./img/${drawType}.png`)}) center center / contain no-repeat`,
    mask: `url(${require(`./img/${drawType}.png`)}) center center / contain no-repeat`,
    ':hover': {
      backgroundColor: analyButActiveColor,
    },
  };
});
